<template>
  <div>
    <el-dialog title="配置正则表达式" :visible="visible" width="50%" @update:visible="updateVisible"
               :close-on-click-modal="false" @open="openDialog">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
        <div class="search">
          <el-form-item label="正则名称" prop="label">
            <el-input v-model.trim="queryParams.label" placeholder="请输入正则名称搜索" clearable/>
          </el-form-item>
          <el-form-item label="表达式" prop="value">
            <el-input v-model.trim="queryParams.value" placeholder="请输入表达式搜索" clearable/>
          </el-form-item>
        </div>
        <div class="search">
          <el-button type="primary" @click="restList()" icon="el-icon-search">查询</el-button>
          <el-button @click="refresh('queryForm')" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-form>
      <div class="create-btn">
        <el-button type="primary" @click="openDialogReForm(1)" icon="el-icon-plus">新 建</el-button>
      </div>
      <div class="create-btn">
        <el-table :data="gridData" max-height="550">
          <el-table-column label="选择" width="80px" align="center">
            <template slot-scope="scope">
              <el-radio
                :label="scope.row.id"
                v-model="templateRadio"
                @change="changeRadio(scope.row)"
              >&nbsp;
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column property="label" label="正则名称" width="200"></el-table-column>
          <el-table-column property="value" label="表达式"></el-table-column>
          <el-table-column label="操作" width="100px;">
            <template slot-scope="scope">
              <el-button type="text" @click="openDialogReForm(scope.row)">编辑</el-button>
              <el-popconfirm
                @onConfirm="handleDelete(scope.row.id)"
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--      <div style="float: right;margin-bottom: 10px;">-->
      <!--        <el-input style="width: 200px;margin-right: 10px" placeholder="请输入内容" v-model="listQuery.keywords" clearable></el-input>-->
      <!--        <el-button type="primary" @click="reList(listQuery)">查 询</el-button>-->
      <!--      </div>-->
      <pagination v-show="totalCount>0" :total="totalCount" :page.sync="listQuery.pageNum"
                  :limit.sync="listQuery.pageRow" layout="total, prev, pager, next" :hide-on-single-page="showHidePage"
                  @pagination="reList"/>
    </el-dialog>
    <ReForm :visible.sync="dialogReForm" :row="row" @refreshList="refreshList()"></ReForm>
  </div>
</template>

<script>
import {
  ruleConfigReApi, deleteReApi
} from '@/api/api'
import Pagination from '@/components/Pagination/index'
import ReForm from './reForm'

export default {
  name: "reList",
  components: {Pagination, ReForm},
  props: ['visible'],
  data() {
    return {
      queryParams: {
        label: "",
        value: ""
      },
      totalCount: 0,
      listQuery: {
        pageRow: 10,
        pageNum: 1
      },
      gridData: [],
      templateRadio: "",
      showHidePage: false,
      dialogReForm: false,
      row: ''
    }
  },
  methods: {
    /*更新本组件弹框状态*/
    updateVisible(val) {
      this.$emit('update:visible', val)
    },

    /*打开本组件弹框的回调*/
    openDialog() {
      this.templateRadio = ""
      this.totalCount > this.listQuery.pageRow ? this.showHidePage = false : this.showHidePage = true
      this.listQuery.pageNum = 1
      this.reList()
    },

    /*打开子组件新建编辑表单*/
    openDialogReForm(row) {
      this.dialogReForm = true
      this.row = row
    },

    /*删除*/
    async handleDelete(id) {
      let resp = await deleteReApi(id)
      this.$message({message: resp, type: 'success'})
      await this.reList()
      this.$emit("againRefreshReConfig", "reList传给ruleForm")
    },

    /*切换radio，提交value*/
    changeRadio(value) {
      console.log(value)
      this.updateVisible(false)
      this.$emit("reValue", value.value)
    },

    /*获取re列表*/
    async reList() {
      this.listQuery = {...this.listQuery, ...this.queryParams}
      let resp = await ruleConfigReApi(this.listQuery)
      this.gridData = resp.list
      this.totalCount = resp.totalCount
    },

    /*更新父组件Re配置结果*/
    refreshList(value) {
      this.reList()
      this.$emit("againRefreshReConfig", "reList传给ruleForm")
    },
    refresh(queryForm) {
      this.$refs[queryForm].resetFields();
      this.reList();
    },
    restList() {
      this.listQuery.pageNum = 1;
      this.reList();
      // this.updateVisible(false)
    },

  }
}
</script>

<style scoped>
.search {
  margin: auto;
  text-align: center
}

.create-btn {
  margin-top: 10px;
}
</style>
